<template>
    <div class="app-container">
        <div class="wrapper nodeMoitor">
            <el-col :span="13" class="warp-main">
                <el-col :span="24" class="warp-main">
                    <div class="el-bar">
                        <p>
                            <i class="iconfont icon-users"></i>查询条件</p>
                        <el-form :inline="true" class="demo-form-inline  el-top">
                            <el-form-item>
                                <el-select v-model="selectPhysicalGroupId" placeholder="请选择物理组">
                                    <el-option v-for="item in physicalGroup" :key="item.name_en" :label="item.name_cn" :value="item.name_en">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item>
                                <el-input v-model="queryKey" placeholder="请输入关键字"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button icon="el-icon-search" @click="nodeQuery" type="primary">查询</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-col>
                <el-col :span="24">
                    <div class="el-bar" style="margin-top:10px;">
                        <p>
                            <i class="iconfont icon-users"></i>查询列表
                            <span>共
                                <span>{{nodeData.length}}</span>条</span>
                        </p>
                        <!--数据列表-->
                        <el-table v-loading="loadingNodeDataTable"  @row-click="rowClick" :data="nodeData" highlight-current-row style="margin-top:10px;">
                            <el-table-column label="" width="50">
                                    <template slot-scope="scope">
                                        <i style="color:#436EEE" class="el-icon-success" v-if="scope.row.status=='True'"></i>
                                        <i style="color:#FF0000" class="el-icon-error" v-if="scope.row.status!='True'"></i>
                                    </template>
                                </el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="hostName" label="主机名称" sortable></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="ip" label="ip" sortable></el-table-column>
                            <el-table-column prop="cpu" label="cpu" sortable></el-table-column>
                            <el-table-column prop="memory" label="内存" sortable></el-table-column>
                            <el-table-column prop="status" label="状态" sortable></el-table-column>
                            <el-table-column prop="operationDate" label="运行时间" sortable></el-table-column>
                            <el-table-column :show-overflow-tooltip="true" prop="physicalZone" label="物理分区" sortable></el-table-column>
                        </el-table>
                    </div>

                </el-col>
            </el-col>
            <el-col :span="11" class="warp-main function-form" style="padding-left:30px;">
                <div class="el-bar">
                    <p>
                        <i class="iconfont icon-users"></i>监控
                    </p>
                    <template>
                        <!--日志监控组件.start-->
                        <monitor :monitorObject="monitorObject" :memory_metrics="memory_metrics" :cpu_metrics="cpu_metrics" :net_in_metrics="net_in_metrics" :net_out_metrics="net_out_metrics" :nodeNames="nodeNames">
                        </monitor>
                        <!--日志监控组件.end-->
                    </template>
                </div>
            </el-col>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts'
import monitor from '@/components/monitorCenter/monitor';
export default {
    components: { monitor },
    data() {
        return {
            monitorObject: 'node',
            memory_metrics: 'memory/usage',
            cpu_metrics: 'cpu/node_utilization',
            net_in_metrics: 'network/rx_rate',
            net_out_metrics: 'network/tx_rate',
            nodeNames: [],

            queryKey: '',
            selectPhysicalGroupId: '',
            physicalGroup: [],
            //节点数据
            nodeData: [],
            // 查询节点遮罩
            loadingNodeDataTable: false,
        }
    },
    methods: {
        rowClick: function(row, event, column) {
            this.nodeNames = [];
            this.nodeNames.push(row.hostName);
        },
        //物理分区查询
        physicalGroupQuery() {
            let url = this.projectConfig.URL_API_INSTRA_GET_PARTITION;
            this.httpClient.httpClientget(url).then((response) => {
                let d = response.data;
                this.physicalGroup = [{
                    physicalID: "00",
                    name_cn: "全部",
                    name_en: ""
                }];
                d.items.forEach(function(element) {
                    this.physicalGroup.push(element);
                }, this);
            })
        },
        //节点查询
        nodeQuery() {
            let url = this.projectConfig.URL_API_INSTRA_NODE;
            url += "?queryKey=" + this.queryKey+"&physicalGroup="+this.selectPhysicalGroupId;
            // 遮罩开启
            this.loadingNodeDataTable = true;
            this.httpClient.httpClientget(url).then((response) => {
                // 遮罩结束
                this.loadingNodeDataTable = false;
                let d = response.data;
                this.nodeData = d.items;
            }).catch(error => {
                // 遮罩结束
                this.loadingNodeDataTable = false;
            });
        }
    },
    mounted: function() {
        let _this = this;
        this.physicalGroupQuery();
        this.nodeQuery();
    },
    //属性变化监听
    watch: {
        selectPhysicalGroupId: {
            handler: function(val, oldval) {
                this.nodeQuery();
            }
        }
    }
}
</script>
<style>
.el-top {
    margin-top: 10px;
}

.nodeMoitor .el-table tr {
    text-align: center;
}

.nodeMoitor .toolbar {
    margin-top: 8px;
}

.nodeMoitor .el-bar .nbd {
    border-bottom: none;
}

.nodeMoitor .el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #ccc;
}

.nodeMoitor el-icon-search {
    border: 1px solid #eaeaea;
    border-radius: 4px;
}

.nodeMoitor .search .el-input {
    border: 1px solid #eaeaea;
}

.nodeMoitor .demo-form-inline {
    margin-top: 10px;
}

.nodeMoitor .time-btn {
    margin-top: 10px;
    text-align: right;
}

.nodeMoitor .el-table th>.cell {
    padding: 0;
}
</style>